@charset "UTF-8";
.sc-alert {
  /* 定义不同样式下的中间变量 */
  /************* primary开始 *************/
  --sc-alert-text-color-primary: var(--sc-color-primary);
  --sc-alert-bg-color-primary: var(--sc-color-primary-light-9);
  /************* primary结束 *************/
  /************* success开始 *************/
  --sc-alert-text-color-success: var(--sc-color-success);
  --sc-alert-bg-color-success: var(--sc-color-success-light-9);
  /************* success结束 *************/
  /************* warning开始 *************/
  --sc-alert-text-color-warning: var(--sc-color-warning);
  --sc-alert-bg-color-warning: var(--sc-color-warning-light-9);
  /************* warning结束 *************/
  /************* danger开始 *************/
  --sc-alert-text-color-danger: var(--sc-color-danger);
  --sc-alert-bg-color-danger: var(--sc-color-danger-light-9);
  /************* danger结束 *************/
  /************* info开始 *************/
  --sc-alert-text-color-info: var(--sc-color-info);
  --sc-alert-bg-color-info: var(--sc-color-info-light-9);
  /************* info结束 *************/
  /* 默认 */
  --sc-alert-text-color: var(--sc-color-primary);
  --sc-alert-bg-color: var(--sc-color-primary-light-9);
}

.sc-alert {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: stretch;
  padding: 8px 16px;
  box-sizing: border-box;
  border-radius: var(--sc-border-radius-base);
  color: var(--sc-alert-text-color);
  background-color: var(--sc-alert-bg-color);
  font-weight: bold;
  transition: display 0.5s;
}

.sc-alert-content, .sc-alert-icon {
  display: flex;
  align-items: center;
  margin-right: 0.5em;
}

.sc-alert-content {
  flex: 1;
}

.sc-alert-close {
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 30px;
}

.sc-alert--primary {
  --sc-alert-text-color: var(--sc-color-primary);
  --sc-alert-bg-color: var(--sc-color-primary-light-9);
}

.sc-alert--primary.is-dark {
  --sc-alert-text-color: var(--sc-color-primary-light-9);
  --sc-alert-bg-color: var(--sc-color-primary);
}

.sc-alert--success {
  --sc-alert-text-color: var(--sc-color-success);
  --sc-alert-bg-color: var(--sc-color-success-light-9);
}

.sc-alert--success.is-dark {
  --sc-alert-text-color: var(--sc-color-success-light-9);
  --sc-alert-bg-color: var(--sc-color-success);
}

.sc-alert--warning {
  --sc-alert-text-color: var(--sc-color-warning);
  --sc-alert-bg-color: var(--sc-color-warning-light-9);
}

.sc-alert--warning.is-dark {
  --sc-alert-text-color: var(--sc-color-warning-light-9);
  --sc-alert-bg-color: var(--sc-color-warning);
}

.sc-alert--danger {
  --sc-alert-text-color: var(--sc-color-danger);
  --sc-alert-bg-color: var(--sc-color-danger-light-9);
}

.sc-alert--danger.is-dark {
  --sc-alert-text-color: var(--sc-color-danger-light-9);
  --sc-alert-bg-color: var(--sc-color-danger);
}

.sc-alert--info {
  --sc-alert-text-color: var(--sc-color-info);
  --sc-alert-bg-color: var(--sc-color-info-light-9);
}

.sc-alert--info.is-dark {
  --sc-alert-text-color: var(--sc-color-info-light-9);
  --sc-alert-bg-color: var(--sc-color-info);
}

.alert-enter-active,
.alert-leave-active {
  transition: opacity 0.3s ease;
  /* 过渡时间和效果 */
}

.alert-enter-from,
.alert-leave-to {
  opacity: 0;
  /* 隐藏时的状态 */
}
